<template>
  <el-card shadow="never">
    <template #header>
      <slot name="header"></slot>
    </template>

    <el-row>
      <el-col :span="4">
        <ElAvatar shape="square" :size="140" :src="user.avatar || undefined" />
      </el-col>
      <el-col :span="20">
        <el-col :span="24" id="info" class="mb4">
          <span class="name font-size-7 font600 color-blue">{{ user.name }}</span>
          <span class="sex">
            <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="user.sex || ''" />
            <!-- <template v-if="user.sex === 1">
              <span class="iconify" data-icon="ep:user"></span>
            </template>
            <template v-if="user.sex === 2">
              <span class="iconify" data-icon="fa:mars-double"></span>
            </template> -->
          </span>
          <span class="isRealName rd bg-red p1 font-size-3">已实名</span>
          <span class="levelName">
            <dict-tag :type="DICT_TYPE.MEMBER_LEVEL" :value="user.userLevel || ''" />
          </span>
          <span class="sharePerson">
            <span class="label color-gray">分销员: </span>
            {{ user.distributors }}
          </span>
          <span class="id">
            <span class="label color-gray">会员编号: </span>
            {{ user.userNo }}
          </span>
          <span class="serialNumber">
            <span class="label color-gray">用户ID: </span>
            {{ user.id }}
          </span>
        </el-col>

        <el-col :span="24" id="monologue" class="h-21 rd bg-black bg-opacity-10 p3">
          <span class="label">内心独白: </span>
          {{ user.innerMonologue }}
        </el-col>
      </el-col>

      <el-col :span="24" class="mt5">
        <el-descriptions :column="3">
          <!-- roW 1 -->
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="生日" />
            </template>
            {{ formatDate(user.birthday, 'YYYY-MM-DD') }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="年龄" />
            </template>
            {{ user.age }}岁
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="身高" />
            </template>
            {{ user.height }}cm
          </el-descriptions-item>

          <!-- roW 2 -->
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="体重" />
            </template>
            {{ user.weight }}kg
          </el-descriptions-item>
          <el-descriptions-item label="手机号">
            <template #label>
              <descriptions-item-label label="手机号" />
            </template>
            {{ user.mobile }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="学历" />
            </template>
            <dict-tag :type="DICT_TYPE.USER_EDUCATION" :value="user.education || ''" />
          </el-descriptions-item>

          <!-- roW 3 -->
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="婚况" />
            </template>
            <dict-tag :type="DICT_TYPE.MARITAL_STATUS" :value="user.marriage || ''" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="月收入" />
            </template>
            {{ user.monthIncome }}元
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="职业" />
            </template>
            {{ user.career }}
          </el-descriptions-item>

          <!--  -->
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="是否购房" />
            </template>
            <dict-tag :type="DICT_TYPE.PURCHASE_SITUATION" :value="user.purchasHouse || ''" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="是否购车" />
            </template>
            <dict-tag :type="DICT_TYPE.PURCHASE_CAR" :value="user.purchasCar || ''" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="是否有孩子" />
            </template>
            <dict-tag :type="DICT_TYPE.HAVE_CHILDREN" :value="user.withChild || ''" />
          </el-descriptions-item>

          <!--  -->
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="是否要孩子" />
            </template>
            <dict-tag :type="DICT_TYPE.WANT_CHILD" :value="user.wantChild || ''" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="结婚时间" />
            </template>
            {{ formatDate(user.marryDate, 'YYYY-MM-DD') }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="是否吸烟" />
            </template>
            <dict-tag :type="DICT_TYPE.HAVA_SMOK" :value="user.smoker || ''" />
          </el-descriptions-item>

          <!--  -->
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="是否喝酒" />
            </template>
            <dict-tag :type="DICT_TYPE.HAVE_DRINK" :value="user.drink || ''" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="民族" />
            </template>
            <dict-tag :type="DICT_TYPE.NATION" :value="user.nation || ''" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="星座" />
            </template>
            <dict-tag :type="DICT_TYPE.CONSTELLATION" :value="user.constellation || ''" />
          </el-descriptions-item>

          <!--  -->
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="籍贯" />
            </template>
            {{ user.nativePlaceName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="所在地" />
            </template>
            {{ user.areaName }}
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
  </el-card>
</template>
<script setup lang="ts">
import { formatDate } from '@/utils/formatTime'
import * as UserApi from '@/api/member/user'
import { DescriptionsItemLabel } from '@/components/Descriptions/index'
import { DICT_TYPE } from '@/utils/dict'

const { user } = defineProps<{ user: UserApi.UserVO }>()
</script>
<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* stylelint-disable-next-line rule-empty-line-before */
#info span {
  margin: 0 0.5rem;
}
</style>
@/api/member/user/index2
